<template>
  <div>
    <div v-show="!isShowDetail">
      <jxf-titletip :title="title" @refreshPage="refreshPage"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="子公司账号:" prop="telphone">
            <el-input v-model.trim="searchInfo.telphone" clearable @keyup.enter.native="enterNextInput('cityName')" ref="input-telphone"></el-input>
          </el-form-item>
          <el-form-item label="城市:" prop="cityName">
            <el-input v-model.trim="searchInfo.cityName" clearable @keyup.enter.native="onSearch" ref="input-cityName"></el-input>
          </el-form-item>
          <el-form-item label="账号状态:" prop="status">
            <el-select v-model="searchInfo.status" clearable placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="addSubsidiary">新增</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="status" slot-scope="subsidiaryList">
              <div>{{subsidiaryList.row.status === 0 ? "禁用" : "启用"}}</div>
          </template>
          <template slot="createTime" slot-scope="subsidiaryList">
            <div>{{subsidiaryList.row.createTime ? FormatDate.timeFormat(subsidiaryList.row.createTime) : ""}}</div>
          </template>
          <template slot="operation" slot-scope="subsidiaryList">
            <el-button type="text" @click="watchDetail(subsidiaryList.row.id)">查看详情</el-button>
            <el-button type="text" @click="freeze(subsidiaryList.row.id)" v-if="subsidiaryList.row.status === 1">禁用</el-button>
            <el-button type="text" @click="unFreeze(subsidiaryList.row.id)" v-if="subsidiaryList.row.status === 0">启用</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <AddSubsidiaryModel :isShowDetail.sync="isShowAddSubsidiary" @fresh="fresh"></AddSubsidiaryModel>
    <SearchSubsidiary v-if="isShowDetail" :dataInfo="dataInfo" @goBack="goBack" @fresh="fresh"></SearchSubsidiary>
  </div>
</template>

<script>
  import AddSubsidiaryModel from './components/AddSubsidiaryModel'
  import SearchSubsidiary from './components/SearchSubsidiary'
  import FormatDate from '@/assets/js/formatDate'
    export default {
        name: "SubsidiaryList",
        components: { AddSubsidiaryModel, SearchSubsidiary },
        data() {
          return {
            title: "子公司列表",
            isShowDetail: false,
            isShowAddSubsidiary: false,
            searchInfo: {
              telphone: "",
              cityName: "",
              status: null
            },
            FormatDate: FormatDate,
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              hasOperation:false,
              tr: [
                {
                  id: '2',
                  width: '120',
                  label: '子公司账号',
                  prop: 'telphone'
                },
                {
                  id: '3',
                  label: '名称',
                  prop: 'userName'
                },
                {
                  id: '4',
                  label: '城市',
                  prop: 'cityName'
                },
                {
                  id: '5',
                  label: '联系电话',
                  width: "120",
                  prop: 'contact'
                },
                {
                  id: '6',
                  label: '注册时间',
                  width: "160",
                  prop: 'createTime',
                  show: 'template',
                },
                {
                  id: '7',
                  label: '账号状态',
                  show: 'template',
                  prop: 'status'
                },
                {
                  id: '8',
                  label: '操作',
                  show: 'template',
                  width: "160",
                  prop: 'operation'
                }
              ],
              operation: [],
              data: []
            },
            pageTotal:0,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          fresh() {
            this.getData()
          },

          refreshPage() {
            this.currentPage = 1;
            this.resetForm('searchInfo');
            this.getData()
          },

          getData() {
            this.dataTable.loading = true;
            let data = {
              ...this.searchInfo,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(apis.architecture.getSubsidiaryList, data).then(result => {
             if(result.code === "10000000") {
                this.dataTable.data = result.data.dataList;
                this.pageTotal = result.data.total;
              } else {
               this.$message.error(result.message)
             }
             this.dataTable.loading = false
            })
          },

          // 详情返回上一页
          goBack() {
            this.isShowDetail = false;
          },

          enterNextInput(inputName) {
            this.$refs["input-" + inputName].focus();
          },

          // 新增
          addSubsidiary() {
            this.isShowAddSubsidiary = true
          },

          // 冻结
          freeze(id) {
            let data = {
              userId: id,
              status: 0
            };
            this.$confirm('此操作将禁用该账户, 是否继续?', '', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                ajax.post(apis.architecture.changeUserStatus, data).then(res => {
                  if(res.code === '10000000') {
                    this.$message({
                      type: 'success',
                      message: '禁用成功!'
                    });
                    this.getData()
                  } else {
                    this.$message.error(res.message)
                  }
                })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          },

          unFreeze(id) {
            let data = {
              userId: id,
              status: 1
            };
            this.$confirm('此操作将启用该账户, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              ajax.post(apis.architecture.changeUserStatus, data).then(res => {
                if(res.code === '10000000') {
                  this.$message({
                    type: 'success',
                    message: '启用成功!'
                  });
                  this.getData()
                } else {
                  this.$message.error(res.message)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          },

          // 查看详情
          watchDetail(id) {
            let data = {
              userId: id,
            };
            ajax.get(apis.architecture.getDetails, data).then(result => {
              if(result.code === "10000000") {
                this.dataInfo = {
                  status: result.data.status,
                  id: result.data.id,
                  telphone: result.data.telphone,
                  basicInfo: [{
                    label: "账号",
                    value: result.data.telphone
                  }, {
                    label: "名称",
                    value: result.data.userName
                  }, {
                    label: "管理区域",
                    value: result.data.cityName
                  }, {
                    label: "联系电话",
                    value: result.data.contact
                  }, {
                    label: "联系地址",
                    value: result.data.detailAdress
                  }, {
                    label: "账号状态",
                    type: "status",
                    value: result.data.status
                  }],
                  additionalInfo: [{
                    label: "真实姓名",
                    value: result.data.ownerName
                  }, {
                    label: "身份证号",
                    value: result.data.idCardNo,
                    type: "idCard"
                  }, {
                    label: "银行卡号",
                    value: result.data.cardNo,
                    type: "cardNo"
                  }, {
                    label: "所属银行",
                    value: result.data.bankName
                  }],
                  qualificationInfo: [
                    {
                      label: "营业执照",
                      value: result.data.licenseImage ? result.data.licenseImage.split(',') : [],
                      type: "business"
                    }, {
                      label: "法人身份证",
                      value: result.data.identityCardImage ? result.data.identityCardImage.split(',') : [],
                      type: "legal"
                    }, {
                      label: "其它证件",
                      value: result.data.otherImage ? result.data.otherImage.split(',') : [],
                      type: "legal"
                    }
                  ]
                };
                this.isShowDetail = true;
              } else {
                this.$message.error(result.message)
              }
            });
          },

          onSearch() {
            this.currentPage = 1;
            this.getData();
          },

          resetForm(forName) {
            this.$refs[forName].resetFields();
          },

          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo;
            this.getData()
          },

          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo;
            this.getData()
          }
        },
        created() {
          this.onSearch();
        }
    }
</script>

<style lang="scss" scoped>

</style>
